import React, {PureComponent} from 'react';
import './index.css'

export default class Parent extends PureComponent {

    state = {carName: "奔驰c63"}

    changeCar = () => {
        this.setState({carName: "迈巴赫"})
        // const obj = this.state // 错误的写法，不是一个纯函数
        // obj.name = "迈巴赫"
        // this.setState(obj)
    }

    // shouldComponentUpdate(nextProps, nextState) {
    //     console.log(this.props, this.state)
    //     console.log(nextProps, nextState)
    //     return this.state.carName !== nextState.carName;
    // }


    render() {
        console.log("Parent--render")
        const {carName} = this.state
        return (
            <div className="parent">
                <h3>我是Parent组件</h3>
                <h4>我的车的名字：{carName}</h4>
                <button onClick={this.changeCar}>点我换车</button>
                <Child carName="奥特"/>
                {/*<Child/>*/}
            </div>
        );
    }
}

class Child extends PureComponent {
    // shouldComponentUpdate(nextProps, nextState) {
    //     console.log(this.props, this.state)
    //     console.log(nextProps, nextState)
    //     return this.props.carName !== nextProps.carName;
    // }
    render() {
        console.log("Child--render")
        return (
            <div className="child">
                <h3>我是Child组件</h3>
                <h4>我接到的车是：{this.props.carName}</h4>
            </div>
        );
    }
}
